let form = layui.form;
let layer = layui.layer;
form.verify({
    nickname: function (value) {
        if (value.length > 6) {
            return '昵称长度必须在 1 ~ 6 个字符之间！'
        }
    }
})
initUserInfo();

//初始化用户的基本信息 将用户输入的数据写入到输入框中
function initUserInfo() {
    $.ajax({
        method: 'GET',
        url: '/my/userinfo',
        success: (res) => {
            if (res.status !== 0) {
                return layui.layer.msg('获取用户信息失败!');
            }
            console.log(res);
            //调用 form.val() 快速为表单赋值
            layui.form.val('formUserInfo', res.data);
        }
    })
}

//重置表单的数据
$("#btnreset").on("click", function (e) {
    //阻止表单的默认重置行为
    e.preventDefault();
    //重新调用 initUserInfo() 函数，重新获取用户信息
    initUserInfo();
})

/**
 * 完成修改用户信息的功能
 * 1. 需要给表单注册submit事件 阻止表单的默认行为
 * 2. 需要收集到 表单的数据
 * 3. 查阅接口文档 关注请求方式与请求参数 还有请求的类型
 * 4. 发送ajax
 * 5. 接收服务器响应回来的数据
 * 6. 判断是否修改成功 如果失败就需要提示用户
 * 7. 如果成功 需要更新页面上面的数据
 */

//监听表单的提交事件
$(".layui-form").on("submit", function (e) {
    //阻止表单的默认提交行为
    e.preventDefault();
    //发起ajax数据请求
    $.ajax({
        method: 'POST',
        url: '/my/userinfo',
        data: $(this).serialize(),
        success: (res) => {
            const {
                status,
                message
            } = res
            if (res.status !== 0) {
                return layui.layer.msg('更新用户信息失败!')
            }
            layui.layer.msg('修改成功')
            //调用父页面中的方法 重新渲染用户的头像和用户的信息
            window.parent.getUserInfo();
        }
    })
})